<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情页</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/vant.index.css">
    <link rel="stylesheet" href="../css/iconfont1.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body,
    .container {
        height: 100%;
        width: 100%;
        background-color: #fff;
    }

    [v-cloak] {
        display: none;
    }

    .header {
        height: 20%;
        padding-top: 20px;
        text-align: center;
        margin-bottom: 20px;
        /* background-color: red; */
    }

    .header a {
        float: left;
        margin-left: 20px;
        margin-top: 13px;
        font-size: 20px;
    }

    h1 {
        width: 60%;
        margin: 0 20%;
        display: block;
    }

    .container .wareimage {
        width: 100%;
        height: 40%;
    }

    .wareimage img {
        width: 100%;
        height: 100%;
    }

    .warething {
        text-align: center;
    }

    .warething h2 {
        width: 80%;
        height: 60px;
        margin: 10px 10%;
    }

    .warething span {
        font-size: 18px;
    }

    .warething p {
        font-size: 30px;
        display: block;
        float: left;
    }

    .warething .price {
        margin-left: 40px;
    }

    .warething .oriPrice {
        margin-right: 40px;
        float: right;
        text-decoration: line-through;
    }

    .warething .details {
        float: left;
        display: block;
        width: 100%;
        height: 300px;
        /* background-color: green; */
    }

    .details h3 {
        display: block;
        width: 120px;
        height: 30px;
        float: left;
        margin: 0;
        margin-left: 15px;
    }

    .details p {
        font-size: 18px;
        padding-left: 10px;
        text-align: left;
        overflow-y: scroll;
        padding-bottom: 70px;
    }
    /* 底部加购 */

    .container footer {
        position: fixed;
        width: 100%;
        height: 50px;
        bottom: 0;
        left: 0;
        margin: 0;
        background-color: rgb(236, 230, 230);
    }

    .buy-button {
        width: 112px;
        height: 40px;
        float: right;
        margin-top: 5px
    }

    .control {
        position: absolute;
        top: 12px;
        left: 16px;
        width: 110px;
        height: 25px;
        display: block;
    }

    .minus {
        position: absolute;
        top: 0;
        left: 0;
        width: 25px;
        height: 25px;
    }

    .count {
        position: relative;
        top: 0;
        margin-left: 31px;
        margin-right: 31px;
        width: auto;
        height: 25px;
        text-align: center;
        line-height: 25px;
        color: #444;
        font-size: 14px;
        background-image: url(../images/system_image/count.png);
        background-repeat: no-repeat;
        background-size: 48px 25px;
        background-position: center center;
    }

    .count p {
        color: black;
        font-size: 15px;
    }

    .add {
        position: absolute;
        top: 0;
        right: 0;
        width: 25px;
        height: 25px;
    }
</style>

<body>
    <div id="app">
        <div class="container" v-cloak>
            <div class="header">
                <a href="javascript:history.go(-1)">返回</a>
                <h1>商品详情页</h1>
            </div>
            <div class="wareimage">
                <img :src="ware.url" alt="">
            </div>
            <div class="warething">
                <h2 class="title">
                    {{ware.title}}
                </h2>
                <p class="price">￥{{ware.price}}</p>
                <p class="oriPrice">￥{{ware.oriPrice}}</p>
                <span class="details">
                    <h3>商品详情：</h3>
                    <p>&nbsp;&nbsp;{{ware.details}}</p>
                </span>
            </div>

            <footer id="footer">
                <div class="control">
                    <img id="minus" src="../images/system_image/minus.png" class="minus" v-on:click="fnMinus();">
                    <div id="count" class="count">
                        <p id='countNum'>0</p>
                    </div>
                    <img id="add" src="../images/system_image/add.png" class="add" v-on:click="fnAdd();">
                </div>
                <img src="../images/system_image/buynow.png" class="buy-button" v-on:click="joinCart();">
            </footer>
        </div>
    </div>
</body>
<script src="../script/vue.js"></script>
<script src="../script/vant.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            ware: {}
        },
        methods: {
            fnMinus: function() {
                var num = document.getElementById('countNum').innerHTML;
                var countNum = num - 1;
                if (countNum < 0) countNum = 0;
                document.getElementById('countNum').innerHTML = parseInt(countNum);
            },
            fnAdd: function() {
                var num = document.getElementById('countNum').innerHTML;
                var countNum = parseInt(num) + 1;
                document.getElementById('countNum').innerHTML = parseInt(countNum);
            },
            joinCart: function() {
                var num = document.getElementById('countNum').innerHTML;
                // alert(vm.ware);
                if (num > 0) {
                    // alert(vm.ware.id);
                    sessionStorage.setItem('goods_' + vm.ware.goodsid, JSON.stringify(vm.ware));
                    sessionStorage.setItem('goodsNum_' + vm.ware.goodsid, JSON.stringify(num));
                    window.location.href = 'cart.html';
                } else {
                    alert('您尚未选购商品');
                }
            }
        }
    });
    // 获取首页或购物车传进来的数据
    var session = sessionStorage.getItem('wareInfo_id');
    var wareId = parseInt(sessionStorage.getItem('Id'));
    // 如果商品id不为空获取商品加购数量，且消亡商品id;
    if (wareId != null) {
        sessionStorage.setItem('Id', null);
        var sessionNum = sessionStorage.getItem('goodsNum_' + wareId);
    }
    // 如果商品信息不为空，传入ware对象
    if (session != null) {
        vm.ware = JSON.parse(session);
        if (sessionNum == null) sessionNum = 0;
        document.getElementById('countNum').innerHTML = parseInt(sessionNum);
    }
</script>

</html>
